<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>在线支付</title>
		<link rel="stylesheet" type="text/css" href="../css/mui.min.css" />
		<link rel="stylesheet" type="text/css" href="../css/own.css" />
		<link rel="stylesheet" type="text/css" href="../css/iconfont.css" />
		<style type="text/css">
			/*下面两项是重置muicss的输入框label和input之间的宽比率*/
			
			.mui-input-row label {
				width: 20%;
			}
			
			.mui-input-row label~input {
				width: 80%;
			}
		</style>
	</head>

	<body style="background-color: #FFFFFF;">

		<header class="mui-bar mui-bar-nav">
			<button type="button" class="mui-action-back mui-btn  mui-btn-link mui-pull-left own-button">
			<span class="mui-action-back mui-icon mui-icon-left-nav own-left-nav-color"></span>
			<span class="own-left-nav-color">取消</span>
		</button>
			<h1 class="mui-title">在线支付</h1>
		</header>

		<div class="mui-content" style="background-color: #FFFFFF;">

			<div style="background-color: #F2F2F2; height: 100px; padding-left: 10%;">

				<div style="height: 80px; width: 95%; padding-top: 20px;">
					<span class="mui-icon  mui-icon-checkmarkempty" style="border-radius: 100%;font-size: 35px; border: solid 1px #04BB21; width: 35px; height: 35px;float: left; color: #04BB21;line-height: 35px;margin-top: 5px;">
							
						</span>

					<p style="font-size: 16px; color: #04BB21;text-indent:0.5em;">订单提交成功，马上付款</p>
					<p style="font-size: 14px; color: #04BB21;text-indent:0.5em">请尽快完成支付，超时订单将关闭。</p>

				</div>

			</div>

			<!--
					应付金额
                -->

			<div>
				<p style="font-size: 18px; color: #000000; margin-left: 5%; margin-top: 15px;">应付金额:<span id="money" style="color: #04BB21; margin-left: 10px;"></span><span style="color: #04BB21;">元</span></p>
				<p style="font-size: 18px; color: #000000; margin-left: 5%; margin-top: 15px;">服务信息:<span id="orderName" style="margin-left: 10px;color: #04BB21;"></span><span id="phone" style="margin-left: 2%; color: #04BB21;"></span>

					<span id="addmap" style="color: #04BB21;">
									
								</span>
					<span id="orderAddrDetail" style="color: #04BB21;">
									
								</span>
				</p>

			</div>

			<div style="height: 40px;background-color: #F2F2F2; line-height: 40px; padding-left: 3%;">
				<p style="color: #848485; font-size: 18px;">请选择支付方式<span style="font-size: 16px; color: #04BB21; margin-left: 5%;">请在120分钟内完成支付</span></p>
			</div>
			<ul class="mui-table-view">
				<li class="mui-table-view-cell" id="weixin">
						<img src="../img/wx.png" style="float: left;">
						<div style="float: left; margin-left: 3%;">
							<p style="font-size: 16px; padding-top: 5px;line-height: 20px;">微信支付</p>
							<p style="font-size: 14px;line-height: 20px;">微信安全支付</p>
						</div>
					
				</li>
				<li class="mui-table-view-cell" id="zhifubao">
				
						<img src="../img/zfb.png" style="float: left;">
						<div style="float: left; margin-left: 3%;">
							<p style="font-size: 16px; padding-top: 5px;line-height: 20px;">支付宝支付</p>
							<p style="font-size: 14px;line-height: 20px;">支付宝安全支付</p>
						</div>
					</li>
				
				
				<li class="mui-table-view-cell" id="zhifubao">
				
						<img src="../img/zfb.png" style="float: left;">
						<div style="float: left; margin-left: 3%;">
							<p style="font-size: 16px; padding-top: 5px;line-height: 20px;">账户余额支付</p>
							<p style="font-size: 14px;line-height: 20px;">爱笑恩安全支付</p>
						</div>
					</li>
			</ul>

		</div>
		<script type="text/javascript" src="../js/jquery-1.11.1.min.js" ></script>
		<script src="../js/mui.min.js" charset="UTF-8"></script>
		<script src="../js/own.js" charset="UTF-8"></script>
		<script type="text/javascript" charset="UTF-8">
			var wxChannel = null; // 微信支付 
			var aliChannel = null; // 支付宝支付 
			var channel = null;
			var data1 ={};
			mui.init({
				swipeBack: true //启用右滑关闭功能 
			});

			mui.plusReady(function() {
				
			//$("money").text(plus.storage.getItem("money"));

			document.getElementById("money").innerHTML=plus.storage.getItem("money");
			document.getElementById("orderName").innerHTML=plus.storage.getItem("orderName");
			document.getElementById("phone").innerHTML=plus.storage.getItem("orderPhone");
			document.getElementById("addmap").innerHTML=plus.storage.getItem("orderAddr");
			document.getElementById("orderAddrDetail").innerHTML=plus.storage.getItem("orderAddrDetail");
				
				/*$("#orderName").text(plus.storage.getItem("orderName"));
				
				$("#phone").text(plus.storage.getItem("orderPhone"));
				$("#addmap").text(plus.storage.getItem("orderAddr"));
				$("#xianxi").text(plus.storage.getItem("orderAddrDetail"));*/

				// 获取支付通道 
				
                data1.tokenCode = plus.storage.getItem("tokenCode");
                data1.accountId = plus.storage.getItem("accountId");
                        	
                        	/*var weixin=document.getElementById("weixin");
                        	weixin.addEventListener("tap",function(){
                        		
                        		 mui.openWindow({
                     	   			url:'../index.html',
                       	   			id:'../index.html'
                        	   	

                        	})*/
                        	
                        	
				plus.payment.getChannels(function(channels) {
					//alert(JSON.stringify(channels));
					for(var i = 0 ; i < channels.length; i++){
						if(channels[i].id == "wxpay"){
							wxChannel = channels[i];
						}
						if(channels[i].id == "alipay"){
							aliChannel = channels[i];
						}
					}
					
				}, function(e) {
					alert("获取支付通道失败：" + e.message);
				});
				
				
				

			});
		
			document.getElementById('weixin').addEventListener('tap', function() {
				console.log("weixin");
				pay('wxpay');
			});

			document.getElementById('zhifubao').addEventListener('tap', function() {
				console.log("zhifubao");
				pay('alipay');
			});

			var ALIPAYSERVER = 'http://demo.dcloud.net.cn/helloh5/payment/alipay.php?total=';
			var WXPAYSERVER = url + 'rest/prePayment';
			// 2. 发起支付请求 
			function pay(id) {
				
				
				var self = plus.webview.currentWebview();
		
		        var dataStr = self.dataStr;
		        
		        var data = JSON.parse(dataStr);
		        
		        data.trade_type = 'APP';
				// 从服务器请求支付订单 
				var PAYSERVER = '';
				if(id == 'alipay') {
					PAYSERVER = ALIPAYSERVER;
					channel = aliChannel;
					data.payType = 'ZFB'
				} else if(id == 'wxpay') {
					PAYSERVER = WXPAYSERVER;
					channel = wxChannel;
					data.payType = 'WX';
				} else {
					plus.nativeUI.alert("不支持此支付通道！", null, "捐赠");
					return;
				}
				
  
    	data1.orderId = data.orderId;
		$.ajax({
			url: url+"/rest/prePayment",
			data: data,
			dataType: 'json', //服务器返回json格式数据
			type: 'POST', //HTTP请求类型
			timeout: 10000, //超时时间设置为10秒；   
			//crossDomain:true,
			//async: false,
		
			success: function(result) {
				
				//alert(888);

				if(result.status != '0') {
					mui.alert(result.msg);

				} else {

					//alert(JSON.stringify(result.data));
					
					//result = JSON.parse(result.data);
					//alert(result.data.prepayid);
                    var varpay = {
                        appid: result.data.appid,
                        noncestr: result.data.noncestr,
                        package: result.data.package,
                        partnerid: result.data.partnerid,
                        prepayid: result.data.prepayid,
                        timestamp: result.data.timestamp,
                        sign: result.data.sign
                    }


                  
                   console.log("appid==>"+varpay.appid);
                   console.log("noncestr==>"+varpay.noncestr);
                   console.log("package==>"+varpay.package);
                   console.log("partnerid==>"+varpay.partnerid);
                   console.log("prepayid==>"+varpay.prepayid);
                   console.log("timestamp==>"+varpay.timestamp);
                   console.log("sign==>"+varpay.sign);
                  
                    plus.payment.request(channel, varpay, function(result) {
                    
                        	
                        	
                     	mui.post(url + 'rest/payment', data1 ,function(result1) {
                        	   
                    	   mui.openWindow({
                     	   			url:'my-order-needtem.html',
                       	   			id:'my-order-needtem.html'
                        	   	
                        	   });
                       });
                           
                    }, function(e) {
                    	if(e.message.indexOf("cancel") != -1){
                    		mui.toast("已取消付款！");
                    	}else{
                    		plus.nativeUI.alert("支付失败：" + e.code + "：" + e.message);
                    	}
                        
                        console.log(e.code);
                        console.log(e.message);
                    });

				}

			},
			error: function(xhr, type, errorThrown) {
				//alert(999);
				//异常处理；
				mui.alert("支付失败：" + type);
				console.log(xhr.status);
				console.log(xhr.readyState);
				console.log(type);
			
			}
		});
			
		
				
			}
			
				
		</script>

	</body>

</html>